<template>
  <el-button @click="back" class="btn transparent">返回</el-button>
  <div class="card-left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="max-width: 480px">
          <template #header>
            <div>
              <span>热门游戏</span>
            </div>
          </template>
          <div class="gamebutton">
            <el-button @click="mathGameDialog = true">数学游戏</el-button>
          </div>
          <div class="gamebutton">
            <el-button @click="mathGameDialog = true">数学游戏</el-button>
          </div>
          <div class="gamebutton">
            <el-button @click="mathGameDialog = true">数学游戏</el-button>
          </div>
          <div class="gamebutton">
            <el-button @click="mathGameDialog = true">数学游戏</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="max-width: 480px">
          <template #header>
            <div>
              <span>便捷工具</span>
            </div>
          </template>
          <div class="gamebutton">
            <el-button @click="englishGameDialog = true">英文大小写转换</el-button>
          </div>
          <div class="gamebutton">
            <el-button @click="linkDialog = true">热门网站</el-button>
          </div>
          <div class="gamebutton">
            <el-button @click="mathGameDialog = true">数学游戏</el-button>
          </div>
          <div class="gamebutton">
            <el-button @click="mathGameDialog = true">数学游戏</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <mathGame :mathGameDialog="mathGameDialog" @update:mathGameDialog="mathGameDialog = $event" />
  <Englishutils :englishGameDialog="englishGameDialog" @update:englishGameDialog="englishGameDialog = $event" />
  <LinkJumpTool :linkDialog="linkDialog" @update:linkDialog="linkDialog = $event" />

</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElDialog } from "element-plus";
import mathGame from "@/components/appcomponents/mathGame.vue";
import Englishutils from "@/components/appcomponents/Englishutils.vue";
import LinkJumpTool from "@/components/appcomponents/LinkJumpTool.vue";
const router = useRouter();
const mathGameDialog = ref(false);
const englishGameDialog = ref(false)
const linkDialog = ref()

const back = () => {
  router.push({ name: "index" });
};
</script>
<script lang="ts">
export default {
  name: "game",
};
/* eslint-disable vue/multi-word-component-names */
</script>
<style scoped>
.card-left {
  width: 60%;
  margin: 0 auto;
}

.gamebutton {
  margin-bottom: 15px;
}
</style>
